<template>
  <div>
    <h2>Child</h2>
    <input
      type="text"
      v-model="son"
    />
    <!-- <button @click="handleClick">给父组件传递数据</button> -->
  </div>
</template>

<script setup>
import { defineProps, ref, defineEmits, watch } from 'vue';
const props = defineProps({
  msg: {
    type: String,
    default: '默认值',
  },
});
const son = ref(props.msg);

const emit = defineEmits(['update:msg']);

// 监听props数据的变化，并重新给子组件赋值
watch(props, (val) => {
  son.value = val.msg;
});

// 监听子组件数据的变化，并同步给父组件
watch(son, () => {
  emit('update:msg', son.value);
});

// const handleClick = () => {
//   emit('update:msg', '子组件的数据');
// };
</script>

<style lang="scss" scoped></style>
